{% extends "layout.html" %}
{% block body %}
<div x-data="{ ...rhasspy, 'sentences': sentences }">
    <div class="form-group">
        <div class="form-row text-muted pl-1">
            <p>Example sentences, formatted <a href="https://docs.python.org/3/library/configparser.html">ini style</a>, with each section (intent) containing a <a href="https://rhasspy.readthedocs.io/en/latest/training/#sentencesini">simplified JSGF Grammar</a>.</p>
        </div>
    </div>

    <!-- Buttons and Drop Down -->
    <div class="form-group">
        <div class="form-row">
            <div class="col-xs-auto">
                <button onclick="saveSentences()" x-bind:class="{ 'btn-danger': sentences.isDirty.value }" class="btn btn-primary">Save Sentences</button>
            </div>
            <div class="col-xs-auto">
                <select id="sentenceKeys" class="form-control" x-model="sentences.currentKey">
                    <option disabled>No sentences</option>
                </select>
            </div>
            <div class="col-xs-auto">
                <button type="button" class="btn btn-success" onclick="$('#newSentencesModal').modal('show')">New Sentences File</button>
            </div>
        </div>
    </div>
    <!-- End Buttons and Drop Down -->

    <!-- Sentences -->
    <div class="form-group">
        <div class="form-row">
            <textarea x-model="sentences.currentText.value" x-bind:class="{ 'border-danger': sentences.isDirty.value }" class="form-control" style="border-width: 3px; font-family: monospace" type="text" rows="25" @input="sentences.isDirty.value = true"></textarea>
        </div>
    </div>
    <!-- End Sentences -->

    <div class="form-group">
        <div class="form-row text-muted pl-1">
            <p>
                Sentences shouldn't contain non-words characters like commas and periods. Optional words are <tt>[bracketed]</tt>. Alternatives are <tt>(separated | by | pipes)</tt>. Rules have an <tt>=</tt> after their name, optionally contain <tt>{tags}</tt>, and are referenced <tt>&lt;by_name&gt;</tt>.
            </p>
        </div>
    </div>

    <div class="form-group">
        <div class="form-row">
            <button onclick="saveSentences()" x-bind:class="{ 'btn-danger': sentences.isDirty.value }" class="btn btn-primary"">Save Sentences</button>
        </div>
    </div>
</div>

<!-- New Sentences File Dialog -->
<div id="newSentencesModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="newSentencesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="newSentencesModalLabel" class="modal-title">New Sentence File</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input id="newSentencesKey" x-model="sentences.newKey" type="text" class="form-control" placeholder="Sentence File Name">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="makeSentencesFile()">New Sentence File</button>
            </div>
        </div>
    </div>
</div>
<!-- End New Sentences File Dialog -->

{% endblock %}

{% block script %}
<script type="text/javascript">
 var sentences = {
     isDirty: { value: false },
     currentText: {
         _value: '',
         get value() { return this._value; },
         set value(v) {
             this._value = v;
             sentences.textByKey[sentences.currentKey] = v;
         }
     },

     newKey: '',
     textByKey: {},

     _currentKey: '',
     get currentKey() {
         return this._currentKey;
     },

     set currentKey(value) {
         this._currentKey = value;
         this.currentText.value = this.textByKey[value];
     }
 }

 function syncKeys() {
     $('#sentenceKeys option').remove();
     Object.keys(sentences.textByKey).forEach((k) => {
         $('#sentenceKeys').append(
             '<option>' + k + '</option>'
         )
     })
 }

 function saveSentences() {
     rhasspy.postBusy('Saving sentences',
                      '/api/sentences',
                      JSON.stringify(sentences.textByKey),
                      false)
            .done(function() {
                sentences.isDirty.value = false;

                if (window.confirm("Sentences saved. Retrain Rhasspy?")) {
                    rhasspy.train();
                } else {
                    rhasspy.hideBusy();
                }
            });
 }

 function makeSentencesFile() {
     if (sentences.newKey.length == 0) {
         alert('Please enter a sentence file name');
         return;
     }

     // Prefix key with sentences_dir (e.g., 'intents/')
     var keyPrefix = rhasspy.profile.speech_to_text.sentences_dir;
     if (!keyPrefix.endsWith('/')) {
         keyPrefix += '/';
     }

     if (!sentences.newKey.startsWith(keyPrefix)) {
         sentences.newKey = keyPrefix + sentences.newKey;
     }

     // Suffix with .ini
     if (!sentences.newKey.endsWith('.ini')) {
         sentences.newKey += '.ini';
     }

     if (sentences.newKey in sentences.textByKey) {
         // Already exists
         alert('Sentence file already exists');
     } else {
         // New key
         $('#newSentencesModal').modal('hide');
         sentences.textByKey[sentences.newKey] = '';
         syncKeys();
         sentences.currentKey = sentences.newKey;
         sentences.newKey = '';
     }
 }

 // Warn user that sentences need to be saved
 window.onbeforeunload = () => {
     if (sentences.isDirty.value) {
         return 'Sentences were not saved. Are you sure?"'
     }
 }

 $(document).ready(() => {
     // Load sentences on start up
     $.get({
         url: '{{ url_prefix }}/api/sentences',
         dataType: 'json',
     }).done((r) => {
         sentences.textByKey = r;
         syncKeys();
         sentences.currentKey = 'sentences.ini';
     })

     // Catch ENTER in dialog
     $("#newSentencesKey").keypress(() => {
         if (event.which == 13) {
             event.preventDefault();
             makeSentencesFile();
         }
     })

     // Focus text box when dialog shown
     $('#newSentencesModal').on('shown.bs.modal', () => {
         $('#newSentencesKey').focus();
     })
 })
</script>
{% endblock %}
